<template>
  <div class="home">
    <div class="head">
      <!-- logo -->
      <div>
        <img style="height: 60px" src="~@/assets/icon/gslogo.png" alt="" />
      </div>
      <!-- 标题 -->
      <div style="font-size: 16px; font-weight: 700">学校知识库</div>
      <!-- 个人中心 -->
      <div>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i style="font-size: 18px" class="el-icon-user-solid"></i>
            <i style="font-size: 18px" class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出</el-dropdown-item>
            <!-- <el-dropdown-item command="password" @click="Changecode">修改密码</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 修改密码 -->
    <el-dialog width="30%" title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="原密码">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" >
          <el-input v-model="form.name"  show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" >
          <el-input v-model="form.name"  show-password autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
import configSite from "@/baseconfig.js";
export default {
  name: "siteHead",
  props: {},
  data() {
    return {
      activeIndex: "/index",
      dialogFormVisible:false,
      form:{
        name:''
      }
    };
  },
  computed: {
    ...mapState(["hasLogin", "userInfo"]),
    config() {
      return configSite;
    },
  },
  created() {
    if (this.hasLogin) {
      // this.getMailNumber()
    }
  },
  methods: {
    handleCommand(command) {
      console.log(command);
      if(command=='logout'){
        this.$api.post("corp/admin/logout", {}).then((res) => {
          this.$router.push({ name: "login" });
        });
      }else if(command=='password'){
        this.dialogFormVisible = true
      }
     
    },
    // Changecode() {
      
    // },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.home
  min-height calc(100vh - 0px)
  .head
    padding 15px 30px
    background #409EFF
    display flex
    justify-content space-between
    align-items center
  >>>.el-icon-arrow-down
    margin-left 5px
    cursor pointer
</style>
